<template>
  <div class="edituser" id="app">
	用户资料修改
	<el-row type="flex" style="margin-top: 10px;" justify="start">
		<el-button disabled>邮箱：</el-button>
		<el-input style="width: 250px;" v-model="userinfo.email" placeholder="邮箱" class="handle-input mr10"></el-input>
		<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="editUserEmail(userinfo.email)">修改</el-button>
	</el-row>
	<el-row type="flex" style="margin-top: 10px;" justify="start">
		<el-button disabled>手机：</el-button>
		<el-input style="width: 250px;" v-model="userinfo.phone" placeholder="手机号" class="handle-input mr10" disabled></el-input>
		<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="test" disabled>修改</el-button>
	</el-row>
	<el-row type="flex" style="margin-top: 10px;" justify="start">
		<el-button disabled>账户：</el-button>
		<el-input style="width: 250px;" v-model="userinfo.username" placeholder="账户" class="handle-input mr10" disabled></el-input>
		<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="test" disabled>修改</el-button>
	</el-row>
	<el-row type="flex" style="margin-top: 10px;" justify="start">
		<el-button disabled>昵称：</el-button>
		<el-input style="width: 250px;" v-model="userinfo.fullname" placeholder="昵称" class="handle-input mr10"></el-input>
		<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="editUserFullname(userinfo.fullname)">修改</el-button>
	</el-row>
	<el-row type="flex" style="margin-top: 10px;" justify="start">
		<el-button disabled>状态：</el-button>
		<el-input style="width: 250px;" v-model="userinfo.status" placeholder="状态" class="handle-input mr10"></el-input>
		<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="editStatus(userinfo.status)">修改</el-button>
	</el-row>
	<el-row type="flex" style="margin-top: 10px;" justify="start">
		<p>友情提醒状态不要乱改，1启用，2禁用，其他均无效</p>
	</el-row>
  </div>
</template>

<script>
	import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  name: 'edituser',
  components: {
  },
  data () {
    return {
		a: 'a'
    }
  },
  computed:{
  	...mapState(['token','userinfo']),
  },
  methods: {
	  test(){
		  alert('占无')
	  },
	  editUserFullname(value){
		  this.$http.post('/admin/profile',{
		  	username: this.userinfo.username,
			fullname: value
		  },{headers:{'Authorization': 'Bearer ' + this.token}}).then((res)=>{
			  this.$notify({title: res.data.notice,message: '史诗由你开始!',type: 'success'});
			  var userinfos = {
			  	email: this.userinfo.email,
			  	phone: this.userinfo.phone,
			  	status: this.userinfo.status,
			  	username: this.userinfo.username,
			  	fullname: value }
			  this.$store.dispatch('setUserinfoActions',userinfos)
		  		console.log(res)
		  	}).catch((err)=>{
		  		console.log(err)
		  	});
	  },
	  editUserEmail(value){
		  this.$http.post('/admin/profile',{
		  	username: this.userinfo.username,
		  	email: value
		  },{headers:{'Authorization': 'Bearer ' + this.token}}).then((res)=>{
			  this.$notify({title: res.data.notice,message: '史诗由你开始!',type: 'success'});
			  var userinfos = {
			  	email: value,
			  	phone: this.userinfo.phone,
			  	status: this.userinfo.status,
			  	username: this.userinfo.username,
			  	fullname: this.userinfo.fullname
			  }
			  this.$store.dispatch('setUserinfoActions',userinfos)
		  		console.log(res)
		  	}).catch((err)=>{
		  		console.log(err)
		  	});
	  },
	  editStatus(value){
		  this.$http.post('admin/status',{
		  	username: this.userinfo.username,
		  	status: value
		  },{headers:{'Authorization': 'Bearer ' + this.token}}).then((res)=>{
			  this.$notify({title: res.data.notice,message: '史诗由你开始!',type: 'success'});
			  var userinfos = {
			  	email: this.userinfo.email,
			  	phone: this.userinfo.phone,
			  	status: value,
			  	username: this.userinfo.username,
			  	fullname: this.userinfo.fullname}
			  this.$store.dispatch('setUserinfoActions',userinfos)
		  		console.log(res)
		  	}).catch((err)=>{
		  		console.log(err)
		  	});
	  }
  },
  beforeCreate: function () {
    console.log('1-beforeCreate 初始化之后')
  },
  created: function () {
    console.log('2-created 创建完成')
  },
  beforeMount: function () {
    console.log('3-beforeMount 挂载之前')
  },
  mounted: function () {
    console.log('4-mounted 被创建')
  },
  beforeUpdate: function () {
    console.log('5-beforeUpdate 数据更新前')
  },
  updated: function () {
    console.log('6-updated 被更新后')
  },
  activated: function () {
    console.log('7-activated 激活的')
  },
  deactivated: function () {
    console.log('8-deactivated 暂停')
  },
  beforeDestroy: function () {
    console.log('9-beforeDestroy 销毁之前')
  },
  destroyed: function () {
    console.log('10-destroyed 销毁之后')
  }
}
</script>

<style scoped>
	li{list-style: none; line-height: 30px;}
</style>
